<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<link rel="stylesheet" href="src/css/index.css">
<link rel="stylesheet" href="src/css/normalize-v5.0.css">
<body>
<header>
    <nav>
        <div class="logo"><a href="#">王小窝</a></div>
        <ul>
            <li><a href="#" id="sidebarTriggle">Menu</a></li>
            <li><a href="#">关于</a></li>
        </ul>
    </nav>
    <div class="banner">
        <div class="inner">
            <hr>
            <h1>王小窝</h1>
            <hr>
            <p class="p-content">shdubsyvdosaijdoivnaoi,dhsauibaosida sdsadsadsdmcas.</p>
            <button>了解我</button>
            <div class="more">
                更多
            </div>
        </div>
    </div>
</header>
<div class="content">
    <section class="green-content">
        <div class="wrapper">
            <div>
                <h2>标题1</h2>
                <h2>副标题：爱吃的孩子都是好孩子</h2>
                <hr>
                <p>爱吃的孩子都是好孩子爱吃，的孩子都是好孩子。爱吃的孩子都是好孩子，爱吃的孩子都是好孩子爱吃的孩子都是好孩子</p>
            </div>
            <div class="icon-group">
                <span class="icon">item</span>
                <span class="icon">item</span>
                <span class="icon">item</span>
            </div>
        </div>
    </section>
    <section class="grey-content">
        <div class="article-preview clear-fix">
            <div class="img-preview">
                <img src="src/img/pic01.jpg"/>
            </div>
            <div class="text-preview">
                <h2>标题2</h2>
                <span>副标题</span>
                <p>loredsadasndjiaushduhiuwq,sda ijidonasidasd.dasdwq, asd, asd.
                    udhqwybduasdaklmdas. asdas,d asd sda .asdashdjhausibdaisbdub
                    asaddddddsdddqbui asihdu ias hiuhsha huaisdnjk asjjlk jas suih
                    ajdisahuidbahdiuhasdjasbduhusais.</p>
            </div>
        </div>

        <div class="article-preview clear-fix">
            <div class="text-preview">
                <h2>标题2</h2>
                <span>副标题</span>
                <p>loredsadasndjiaushduhiuwq,sda ijidonasidasd.dasdwq, asd, asd.
                    udhqwybduasdaklmdas. asdas,d asd sda .asdashdjhausibdaisbdub
                    asaddddddsdddqbui asihdu ias hiuhsha huaisdnjk asjjlk jas suih
                    ajdisahuidbahdiuhasdjasbduhusais.</p>
            </div>
            <div class="img-preview">
                <img src="src/img/pic02.jpg"/>
            </div>
        </div>

        <div class="article-preview clear-fix">
            <div class="img-preview">
                <img src="src/img/pic03.jpg"/>
            </div>
            <div class="text-preview">
                <h2>标题2</h2>
                <span>副标题</span>
                <p>loredsadasndjiaushduhiuwq,sda ijidonasidasd.dasdwq, asd, asd.
                    udhqwybduasdaklmdas. asdas,d asd sda .asdashdjhausibdaisbdub
                    asaddddddsdddqbui asihdu ias hiuhsha huaisdnjk asjjlk jas suih
                    ajdisahuidbahdiuhasdjasbduhusais.</p>
            </div>
        </div>
    </section>
    <section class="purple-content">
        <div>
            <div class="purple-title">
                <h2>标题3</h2>
                <p>
                loredsadasndjiaushduhiuwq,sda ijidonasidasd.dasdusibdaisbdub
                asaddddddsdddqbui asihdu ias hiuhsha huaisdnjk asjjlk jas suih
                ajdisahuidbahdiuhasdjasbduhusais.
                </p>
            </div>
            <div class="card-content clear-fix">
                <div class="card">
                    <span></span>
                    <h3>标题h3</h3>
                    <p>
                        123456789jdiasodiuqbw sdas sadjio joi dn djisaoduqwb budhsbabajoi jijinfqudbusayg h
                    djaiowqnb dqwjiodinsad daksndnw dlwkqjdiosaiou das.das das, asdwqd,qw wqeldpqpdad dda dmwqinioand
                    dasjdio , asdjioqw.
                    </p>
                </div>
                <div class="card">
                    <span></span>
                    <h3>标题h3</h3>
                    <p>
                        123456789jdiasodiuqbw sdas sadjio joi dn djisaoduqwb budhsbabajoi jijinfqudbusayg h
                        djaiowqnb dqwjiodinsad daksndnw dlwkqjdiosaiou das.das das, asdwqd,qw wqeldpqpdad dda dmwqinioand
                        dasjdio , asdjioqw.
                    </p>
                </div>
                <div class="card">
                    <span></span>
                    <h3>标题h3</h3>
                    <p>
                        123456789jdiasodiuqbw sdas sadjio joi dn djisaoduqwb budhsbabajoi jijinfqudbusayg h
                        djaiowqnb dqwjiodinsad daksndnw dlwkqjdiosaiou das.das das, asdwqd,qw wqeldpqpdad dda dmwqinioand
                        dasjdio , asdjioqw.
                    </p>
                </div>
                <div class="card">
                    <span></span>
                    <h3>标题h3</h3>
                    <p>
                        123456789jdiasodiuqbw sdas sadjio joi dn djisaoduqwb budhsbabajoi jijinfqudbusayg h
                        djaiowqnb dqwjiodinsad daksndnw dlwkqjdiosaiou das.das das, asdwqd,qw wqeldpqpdad dda dmwqinioand
                        dasjdio , asdjioqw.
                    </p>
                </div>
                <div class="card">
                    <span></span>
                    <h3>标题h3</h3>
                    <p>
                        123456789jdiasodiuqbw sdas sadjio joi dn djisaoduqwb budhsbabajoi jijinfqudbusayg h
                        djaiowqnb dqwjiodinsad daksndnw dlwkqjdiosaiou das.das das, asdwqd,qw wqeldpqpdad dda dmwqinioand
                        dasjdio , asdjioqw.
                    </p>
                </div>
                <div class="card">
                    <span></span>
                    <h3>标题h3</h3>
                    <p>
                        123456789jdiasodiuqbw sdas sadjio joi dn djisaoduqwb budhsbabajoi jijinfqudbusayg h
                        djaiowqnb dqwjiodinsad daksndnw dlwkqjdiosaiou das.das das, asdwqd,qw wqeldpqpdad dda dmwqinioand
                        dasjdio , asdjioqw.
                    </p>
                </div>
            </div>
        </div>
    </section>
    <section class="transpent-content">
        <div class="transpent-container clear-fix">
            <div class="left">
                <h2>副标题</h2>
                <p>
                    456789jdiasodiuqbw sdas sadjio joi dn djisaoduqwb budhsbabajoi jijinfqudbusayg h
                    djai jiosadj aisj huhuihudainsdiwq . asjioi nnausuihuia hdasj jiao iioa oijasi j
                    djaiosi doiajsi ojoai hoda
                </p>
            </div>
            <div class="right">
                <ul>
                    <li><button>123</button></li>
                    <li><button>456</button></li>
                </ul>
            </div>
        </div>
    </section>
</div>
<footer>
    <div>
        &copy;王小窝
    </div>
</footer>

<div class="mask" id="mask"></div>

<div class="sidebar" id="sidebar">
    <ul>
        <li><a href="">menu1</a></li>
        <li><a href="">menu2</a></li>
        <li><a href="">menu3</a></li>
        <li><a href="">menu4</a></li>
        <li><a href="">menu5</a></li>
    </ul>
</div>

<button id="backtop" class="backtop">返回顶部</button>


<script src="src/js/jquery-3.1.1.min.js"></script>
<script src="src/js/main.js"></script>

</body>
</html>